🎯 Goal

Closes REACT-597

This PR is introducing useAudioPlayer hook to SDK components that replaces useAudioController hook. All the audio playback is centralized using useAudioPlayer. The original useAudioController hook has been deprecated but still exported. Should be removed with the next major release.

For proper cleanup component WithAudioPlayback has been introduced. It removes all the subscriptions and audio elements when unmounted. It is rendered within the Channel component. That means that upon navigation to another channel, the audio is stopped, event listeners removed, state subscriptions unsubscribed and audio elements are removed from the pool to allow them to be garbage collected. It is possible to play audios in the following modes:

1. single-playback - can play single audio at a time. If another audio is requested to be played, the currently playing audio is stopped. A single <audio/> element is shared among all the players. This is the default mode.
2. concurrent-playback - can play multiple audios at the same time. Enabled by passing allowConcurrentAudioPlayback prop to Channel or in general by rendering <WithAudioPlayback allowConcurrentPlayback>{children}</<WithAudioPlayback allowConcurrentPlayback>

The integrators have available the following utilities:

useAudioPlayer hook

const audioPlayer = useAudioPlayer({
    mimeType: mime_type,
    requester:
      message?.id &&
      `${threadList ? (message.parent_id ?? message.id) : ''}${message.id}`,
    src: asset_url,
  });

const { isPlaying, progress } =
    useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};

<PlayButton isPlaying={!!isPlaying} onClick={audioPlayer.togglePlay} />
<ProgressBar onClick={audioPlayer.seek} progress={progress ?? 0} />

WithAudioPlayback

<WithAudioPlayback>
  {children}
</WithAudioPlayback>

useActiveAudioPlayer hook (relevant when allowConcurrentPlayback === false)
Useful for central audio player widget that shows reproduction of the active audio player:

const TopLevelComponent = () => {
  // the allowConcurrentPlayback has to be disabled (default)
  return (
    <WithAudioPlayback>
      {children}
    </WithAudioPlayback>
  );
};

const ComponentStartsPlayback = () => {
  const { message, threadList } = useMessageContext() ?? {};

  const audioPlayer = useAudioPlayer({
    durationSeconds: duration ?? 0,
    fileSize: file_size,
    mimeType: mime_type,
    playbackRates,
    requester:
      message?.id &&
      `${threadList ? (message.parent_id ?? message.id) : ''}${message.id}`,
    src: asset_url,
    title,
    waveformData: waveform_data,
  });

  if (!audioPlayer) return null;

  return <PlayButton isPlaying={!!isPlaying} onClick={audioPlayer.togglePlay} />
}

const ChildComponent = () => {
  const activePlayer = useActiveAudioPlayer();

 return activePlayer ? <GlobalAudioWidget audioPlayer={audioPlayer}/> : null;
}

🛠 Implementation details

I had to introduce message context dependency to attachment widgets Audio, Card, VoiceRecordingPlayer in order to be able to provide separate audio resource to each widget even though the widget request playback of the same asset URL.

The component props have not been changed.

Out of scope

A BaseAudioPlayer React component that would be just a UI component getting audioPlayer prop and would serve to interact with the audio playback (would be used internally in Audio and VoiceRecording components.

🎨 UI Changes

No changes

Docs

https://github.com/GetStream/docs-content/pull/750